<template>
    <HeaderCom>
        <template v-slot:left>
            <svg class="icon" @click="chuXian">
                <use xlink:href="#icon-danlieliebiao"></use>
            </svg>
        </template>
        <template v-slot:center>
            <div class="searchBtn" @click="searchJump()">
                <svg class="icon">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <span> 大家都在搜陶喆</span>
            </div>
        </template>
        <template v-slot:right>
            <svg class="icon">
                <use xlink:href="#icon-record-sound-full"></use>
            </svg>
        </template>
    </HeaderCom>
    <FaXianSwiperOne/>
    <NavCom></NavCom>
    <RecommendedSongList/>
<!--    <PopularPodcasts/>-->
    <JingXuan/>
    <AsideLeft ref="asideleft"/>
</template>

<script>
    import HeaderCom from "../components/header/HeaderCom.vue";
    import FaXianSwiperOne from "../components/swiper/FaXianSwiperOne.vue";
    import NavCom from "../components/nav/NavCom.vue";
    import RecommendedSongList from "../components/RecommendedSongList.vue";
    import PopularPodcasts from "../components/PopularPodcasts.vue";
    import AsideLeft from "../components/aside/AsideLeft.vue";
    import JingXuan from "../components/JingXuan.vue";
    import {getBanner} from "@/api";

    export default {
        name: "FaXianView",
        components:{
            HeaderCom,
            FaXianSwiperOne,
            NavCom,
            RecommendedSongList,
            PopularPodcasts,
            AsideLeft,
            JingXuan
        },
        data(){
            return{
                searchKey:''
            }
        },
        mounted() {
        //     getBanner('/search/default')
        //         .then(response=>{
        //             this.searchKey=response.data
        //             console.log(response.data)
        //         })
        },
        methods:{
            searchJump(){
                this.$router.push('/search-view')
            },
            chuXian(){
                this.$refs.asideleft.yiDong()
            },
        }
    }
</script>

<style scoped>
    .icon{
        width: 35px;
        height: 30px;
        margin-top: 10px;
    }
    .searchBtn{
        width: 100%;
        height: 30px;
        margin-top: 10px;
        text-align: center;
        background: #fff;
        border-radius: 15px;
        color: #a39494;
    }
    .searchBtn>.icon{
        width: 20px;
        height: 20px;
        margin-top: 5px;
        vertical-align: bottom;
    }
</style>